<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

  
</head>
<body>
    <div class="box">
         <!-- Swiper -->
         <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                  <img src="../img/index-swiper-bg1.jpg" alt="">
              </div>
              <div class="swiper-slide">
                  <img src="../img/index-swiper-bg2.jpg" alt="">
              </div>

              <div class="swiper-slide">
                <img src="../img/index-swiper-bg3.jpg" alt="">
            </div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
          </div>

          <!-- 内容 -->
          <div class="home-main">
            <ul>
                <li class="ranking">
                    <p class="ranking-title">今日排名</p>
                    <img src="../img/index-card-rank.png" alt="">
                    <p id="rank">9</p>
                </li>
                <li class="clock">
                    <p class="clock-title" id="punchDay">累计打卡23天</p>
                    <img src="../img/index-card-sum.png" alt="">
                    <button id="todayPunch">今日打卡</button>
                </li>

                <li class="data">
                    <p class="data-title">运动数据</p>
                </li>

                <li class="badge">
                        <p class="badge-title">累计运动徽章</p>
                        <img src="../img/index-card-badge.png" alt="">
                        <p id="badge">3</p>
                        <span>枚</span>
                </li>

                <li class="drill">
                    <p class="drill-title">课程训练</p>
                </li>
                <li class="running">
                    <p class="running-title">户外跑步</p>
                </li>
            </ul>

          </div>

          <!-- 导航 -->
          <div class="nav dpflex">
              <p class="dpflex fdcolumn ">
                  
                    <a href="./home.html" class="iconfont icon-shouye active" ></a>
                    <a href="./home.html" class="active">首页</a>
              </p>

              <p class="dpflex fdcolumn">
                      <a href="./running.html" class="iconfont icon-yundongjulebu"></a>
                      <a href="./running.html">运动</a>
              </p>

              <p class="dpflex fdcolumn">
                <a href="focus.html" class="iconfont icon-pintu"></a>
                <a href="focus.html">圈子</a>
             </p>

             <p class="dpflex fdcolumn">
                <a href="mine.html" class="iconfont icon-wode"></a>
                <a href="mine.html">我的</a>
             </p>
          </div>
    </div>
    <!-- <script src="../libs/swiper/js/swiper-bundle.min.js"></script> -->
   
</body>
</html>